(function(){
    // Ext.util.Observable 基类
    
    // dhtml事件绑定，在页面上
    function testDhtmlEventBind(){
        alert("dhtml事件绑定");
    }
    
    // dom事件绑定
    function testDomEventBind(){
        if(Ext.isIE){
            document.getElementById("btn2").attachEvent("onclick", function(){
                alert("dom事件绑定");
            });
        }else{
            document.getElementById("btn2").addEventListener("click", function(){
                alert("dom事件绑定");
            });
        }
    }
    
    // extjs事件绑定
    function testExtjsEventBind(){
        Ext.get("btn3").on("click", function(){
            alert("extjs事件绑定");
        });
    }
    
    // 自定义事件
    function testExtjsCustomEvent(){
        Ext.define("Children", {
            // 事件基类
            extend: "Ext.util.Observable",
            // 构造方法
            constructor: function(){
                this.state = "hungry",
                // 给对象添加事件
                this.addEvents({
                    "hungry": true
                }),
                // 注册监听
                this.addListener("hungry", function(milk){
                    if(this.state == "hungry"){
                        this.drink(milk);
                    }else{
                        alert("full");
                    }
                }),
                this.setMilk = function(milk){
                    // 触发事件
                    this.fireEvent("hungry", milk);
                },
                this.drink = function(milk){
                    alert("I drink " + milk);
                }
            }
        });
        var child = Ext.create("Children", {});
        // 拦截事件: before the event is fired, If the supplied function returns false, the event will not fire.
        Ext.util.Observable.capture(child, function(eventName){
            if(eventName == "hungry"){
                alert("capture hungry");
                return false;
            }else{
                return true;
            }
        });
        child.setMilk("cocacola");
    }
    
    // 事件传播: 事件继续传播到其他对象，形成事件流
    // TODO: 事件传播机制比方法直接调用其他对象更加的解耦合?
    function testExtjsRelayEvent(){
        Ext.define("Children", {
            extend: "Ext.util.Observable",
            constructor: function(){
                this.state = "hungry",
                this.addEvents({
                    "hungry": true
                }),
                this.addListener("hungry", function(milk){
                    if(this.state == "hungry"){
                        this.drink(milk);
                    }else{
                        alert("full");
                    }
                }),
                this.setMilk = function(milk){
                    this.fireEvent("hungry", milk);
                },
                this.drink = function(milk){
                    alert("I drink " + milk);
                }
            }
        });
        // 未声明事件
        Ext.define("Father", {
            extend: "Ext.util.Observable",
            constructor: function(config){
                // 必须是完全继承的 
                this.listeners = config.listeners;
                this.superclass.constructor.call(this, config);
            }
        });
        var child = Ext.create("Children", {});
        var father = Ext.create("Father", {});
        // 接收传播事件
        // relayEvents( Object origin, String[] events, String prefix )
        // Relays selected events from the specified Observable as if the events were fired by this.
        father.relayEvents(child, ["hungry"]);
        // 相当于addEvents和addListener
        father.on("hungry", function(){
            alert("father say");
        });
        child.setMilk("cocacola");
    }
    
    // 可管理的事件
    function testExtjsManagedEvent(){
        var tbar = Ext.create("Ext.toolbar.Toolbar", {
            renderTo: Ext.getBody(),
            width: 500,
            items: [
                {xtype: "button", id: "btn_a", text: "btn_a"},
                {xtype: "button", id: "btn_b", text: "btn_b"},
                {xtype: "button", id: "btn_c", text: "delete btn_b", handler: function(){
                    // 获得extjs的组件
                    var b = Ext.getCmp("btn_b");
                    if(b){
                        b.destroy();
                    }
                }}
            ]
        });
        var a = Ext.getCmp("btn_a");
        var b = Ext.getCmp("btn_b");
        // Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is destroyed.
        // b管理着a的事件，如果b被删除，a的事件也被remove掉
        b.addManagedListener(a, "click", function(){
            alert("a click");
        });
    }
    
    // 事件对象
    function testExtEventObject(){
        // Ext.EventObject
        var b = Ext.get("btn4");
        // TODO: 对这种回调还是搞不大懂，是不是要从模式上来了解?
        // 自定义事件是没有event的
        b.on("click", function(event){
            alert(event.getPageX());
        });
    }
    
    // 事件管理器: 通过事件管理器进行事件监听
    function testExtEventManager(){
        Ext.EventManager.addListener("btn5", "click", function(){
            alert("EventManager");
        });
    }
    
    var webroot;
    
    Ext.onReady(function(){
        webroot = Ext.get("webroot").getValue();
//        testDomEventBind();
//        testExtjsEventBind();
//        testExtjsCustomEvent();
//        testExtjsManagedEvent();
//        testExtjsRelayEvent();
//        testExtEventObject();
//        testExtEventManager();
    });
})();